11. Typography

Typography Heading

Typography

ND001 C01 L02 06 Typography With CSS

Text alignment

Text alignment

The aptly named text-align property defines the alignment of the text in an HTML element.

p {
  text-align: left;
}

Other accepted values are right, center, or justify.

Quiz 8 - Text alignment

Which HTML elements will the following CSS statement be applied to?

.has-text-centered {
  text-align: center;
}
SOLUTION:

Underlined Text

Underlined Text

The text-decoration property determines whether text is underlined or not. By setting it to none, we can remove the default underline from all of our links. We’ll discuss link styles in-depth later on.

a {
  text-decoration: none;
}

Deleted Text

Deleted Text

The other common value for text-decoration is line-through to strike out “deleted” text. But, remember that meaning should always be conveyed through HTML—not CSS. It’s better to use the <ins> and <del> elements instead of adding a line-through style to, say, an ordinary <p> element.

Line Height

Line Height

Just as alignment isn’t an arbitrary decision, neither is the space between text. In this section, we’re concerned with the responsible use of three CSS properties:

  • margin-top (or padding-top)
  • margin-bottom (or padding-bottom)
  • line-height

The first two should be pretty familiar by now, and they define the vertical space between separate paragraphs. The new line-height property determines the amount of space between lines in the same paragraph. In traditional typography, line-height is called “leading” because printers used little strips of lead to increase the space between lines of text.

Quiz 9 - Line Height

What is the line-height property used for?

SOLUTION: controls height of space between two lines of content